<template>
  <svg className="text-svg" :style="{ cursor: 'pointer' }">
    <TextSvg :config="config" :showValue="showValue" />
  </svg>

  <!-- <svg class='text-svg'>
        <TextSvg :config="config" :showValue="showValue"/>
    </svg> -->
</template>

<script setup>
import { ref, computed } from "vue";
import TextSvg from "./TextSvg.vue";
import Custom_Variable from "../CUSTOM";

const props = defineProps({
  config: Object,
});

const visible = ref(false);
const disClientX = ref(0);
const disClientY = ref(0);

const nameToUnitStr = {
  胆汁: "ml",
  引流量: "ml",
  鼻饲: "ml",
  口入: "ml",
  腹围: "cm",
  胃液: "ml",
};

const showName = computed(() => (props.config || {}).showName);

const fontSize = computed(() => (props.style.fontSize || 12) - 0 + 4);
const hasBeforeValue = computed(
  () => ![null, undefined, ""].includes(props.beforeValue)
);
const hasAfterValue = computed(
  () => ![null, undefined, ""].includes(props.afterValue)
);
const hasThreeValue = computed(
  () => ![null, undefined, ""].includes(props.threeValue)
);

const showValue = computed(() => {
  let specialListArr = [];
//   console.log("showValue",props.config.specialShow);
  if (props.config.specialShow) {
    specialListArr = [
      {
        dx: 0,
        dy: 0,
        fill: !hasBeforeValue.value ? "transparent" : "",
        style: { fontSize: fontSize.value },
        value: hasBeforeValue.value ? props.config.beforeValue : "0",
      },
      {
        dx: 0,
        dy: 0,
        fill: "transparent",
      },
      {
        dx: 0,
        dy: -3,
        fill: !hasAfterValue.value ? "transparent" : "",
        value: hasAfterValue.value ? props.afterValue : "0",
      },
      {
        dx: -2,
        dy: -3,
        style: { fontSize: 16 },
        value: hasBeforeValue.value ? props.config.beforeValue : "0",
      },
    ];
    if (Custom_Variable.isEnema) {
      specialListArr.push({
        dx: -2,
        dy: 3,
        value: (hasThreeValue.value ? props.threeValue : "0") + "E",
      });
    } else {
      specialListArr.push({
        dx: -2,
        dy: 3,
        value: "E",
      });
    }
    
//   console.log("showValue11",specialListArr);
    return specialListArr;
  }else{
    
//   console.log("showValue22",props.config.value);
    return props.config.value;
  }

});

//   const showLabelValue = computed(() => {
//     if (props.specialShow) {
//       return (
//         <svg width="100px" height="22px">
//           <text x="20px" y="15px" style={props.style}>
//             {showValue.value}
//           </text>
//         </svg>
//       );
//     }
//     return props.value;
//   });

const handleClick = (event) => {
  const rect = event.target.getBoundingClientRect();
  disClientX.value = event.clientX - rect.left;
  disClientY.value = event.clientY - rect.top;
};

const edit = (event) => {
  event.preventDefault();
  event.stopPropagation();
  if (props.onPointEdit) {
    props.onPointEdit(
      { value: props.vitalsignsvalues, date: props.date, name: props.name },
      event
    );
  }
  visible.value = false;
};

const removeCallback = () => {
  visible.value = false;
};

const remove = (event) => {
  event.preventDefault();
  event.stopPropagation();
  if (props.onPointRemove) {
    props.onPointRemove(
      {
        value: props.vitalsignsvalues,
        date: props.date,
        name: props.name,
        isCus: props.isCus,
        callback: removeCallback,
      },
      event
    );
  } else {
    visible.value = false;
  }
};

const handleVisibleChange = (newVisible) => {
  visible.value = newVisible;
};
</script>
